<template>
  <main style="background-color: #f5f6f8; padding: 1.5rem 0; min-height: 100vh">
    <van-form @submit="onSubmit" label-width="5em">
      <van-cell-group inset>
        <van-field
          v-model="model.name"
          name="mobile"
          size="large"
          label="姓名"
          placeholder="请填写姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="model.mobile"
          name="mobile"
          size="large"
          label="手机号"
          type="digit"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="model.address"
          is-link
          readonly
          name="address"
          label="所在地区"
          @click="showArea = true"
        >
          <template #input>
            <div style="padding: 0 0.6rem">{{ model.address || `点击选择省市区` }}</div>
          </template>
        </van-field>

        <van-field
          v-model="model.district"
          name="district"
          size="large"
          label="详细地址"
          placeholder="详细地址"
          :rules="[{ required: true, message: '请填写详细地址' }]"
        />
        <van-field name="status" label="设为默认">
          <template #input>
            <div style="padding: 0 0.6rem">
              <van-switch v-model="model.status" size=".8em" :active-value="1" :inactive-value="0" />
            </div>
          </template>
        </van-field>
        <van-field v-model="model.id" name="id" type="hidden" v-show="false" />
        <van-field v-model="model.user_id" name="id" type="hidden" v-show="false" />
      </van-cell-group>
      <div style="margin: 35px">
        <van-button round block type="primary" native-type="submit"> 保 存 </van-button>
      </div> </van-form
    ><van-popup v-model:show="showArea" position="bottom">
      <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
    </van-popup>
  </main>
</template>

<script setup>
import { useUserInfoStore } from '@/stores/user.js' // 导入 useUserInfoStore 函数，用于获取用户信息的 store
import { areaList } from '@vant/area-data' // 导入地区数据
import { storeToRefs } from 'pinia' // 导入 storeToRefs 函数，用于将 store 转换为响应式引用
import { showToast } from 'vant' // 导入 vant 库中的提示组件函数
import { reactive, ref } from 'vue' // 导入 Vue 的 reactive 和 ref 函数，用于创建响应式数据
import { useRouter } from 'vue-router' // 导入 vue-router 库中的 useRouter 函数，用于获取路由实例
import { addressAdd } from '../api' // 导入自定义的 API 函数，用于地址新增操作

const router = useRouter() // 获取路由实例
const userInfoStore = useUserInfoStore() // 使用 useUserInfoStore 函数创建用户信息的 store 实例
const { curStudent } = storeToRefs(userInfoStore) // 将 store 转换为响应式引用，并解构出 curStudent 属性

const model = reactive({
  user_id: curStudent.value.id, // 用户ID，从用户信息中获取
  mobile: ``, // 手机号，默认为空字符串
  name:'', // 姓名，默认为空字符串
  district: ``, // 区域，默认为空字符串
  address: ``, // 详细地址，默认为空字符串
  status: 0 // 状态，默认为0
})


// 提交表单
async function onSubmit() {
  try {
    await addressAdd(model) // 调用 addressAdd 函数进行地址新增操作
    showToast(`添加成功`) // 显示添加成功的提示消息
    router.back() // 返回上一页
  } catch (error) {
    showToast(`请输入正确的手机号`) // 显示请输入正确的手机号的提示消息
  }
}

const showArea = ref(false) // 创建一个 ref 对象，默认为 false
const onConfirm = ({ selectedOptions }) => {
  showArea.value = false // 将 showArea 的值设置为 false，隐藏区域选择组件
  model.address = selectedOptions.map((item) => item.text).join('') // 获取选择的区域信息，拼接为字符串，并赋值给 model.address
}

</script>

<style lang="less" scoped></style>
